var tabs = [{
	id: 0,
	name: '模拟考试',
	selected: true
}, {
	id: 1,
	name: '我的错题',
	selected: false
}];

$(() => {
	initTabs();
	loadData();
	initListener();
})

initListener = () => {
	$("#load_layout").on('click', () => {
		loadData();
	});
	$("#load_layout_1").on('click', () => {
		loadDone();
	});
}

loadData = () => {
	startLoading();
	$("#list").html('');
	let postData = {};
	queryMockPaper(postData, res => {
		setTimeout(() => {
			hideLoading();
			if (res.code == 200) {
				setList(res.data, 0, 'list');
			} else {
				setLoadState('stateUlr', loginFail());
			}
		}, 1000)
	})
}

loadDone = () => {
	startLoading2();
	$("#list_done").html('');
	let postData = {};
	queryMockPaper(postData, res => {
		setTimeout(() => {
			hideLoading2();
			if (res.code == 200) {
				setList(res.data, 1, 'list_done');
			} else {
				setLoadState2('stateUlr', loginFail());
			}
		}, 1000)
	})
}

setList = (mlist, index, listId) => {
	$(`#${listId}`).html('');
	if (ArrayEmpty(mlist)) {
		if (index == 0) {
			setLoadState('stateUlr', noData());
		} else if (index == 1) {
			setLoadState2('stateUlr', noData());
		}
	} else {
		let itemHtml = ``;
		let optionText = index == 0 ? '进入考试' : '查看错题';
		mlist.forEach(e => {
			let questionInfoHtml = ``;
			if (index == 0) {
				questionInfoHtml = `<div class="list_item_child">
									<div class="flex_1">
										题目总数：<span class="val">${e.questionCount}题</span> 
									</div>
									<div class="flex_1">
										考试时长：<span class="val">${e.examTimeLimit}分钟</span> 
									</div>
								</div>
								<div class="list_item_child">模考时间：<span class="val">${e.beginDate}~${e.endDate}</span></div>`;
			} else {
				let percent = (Number(e.errorCount) / Number(e.questionCount) * 100).toFixed(2);
				questionInfoHtml = `<div class="list_item_child">考试错题：
										<div class="progress">
											<span class="blue" style="width: ${percent}%;"><span>${percent}%</span></span>
										</div> 
										<span class="val" style="margin-left: 10px;">${e.errorCount}/${e.questionCount}</span>
									</div>`;
			}

			itemHtml += `<div class="list_item">
							<div class="list_content">
								<label class="list_item_title_row">
									<span class="list_item_title_text flex_1">${e.paperName}</span>
									<div class="btn_in_list" onclick="getItem('${toObjectStr(e)}','${index}')">${optionText}</div>
								</label>
								<div class="list_item_child">考试课程：<span class="val">${e.courseName}</span></div>
								<div class="list_item_child">学年学期：<span class="val">${e.semester}</span></div>
								${questionInfoHtml}
							</div>
						</div>`;

		})
		$(`#${listId}`).html(itemHtml);
	}
}

getItem = (e, index) => {
	let item = toObject(e);
	let start = item.beginDate;
	let end = item.endDate;
	if (index == 0) {
		if (new Date().getTime() > getLongTime(start) && new Date().getTime() < getLongTime(end)) {
			navigateTo(`mock_info.html?item=${e}`)
		} else {
			showToast('当前不在模拟考试时间范围内')
		}
	} else if (index == 1) {
		navigateTo(`mock_error.html?item=${e}`)
	}
}

initTabs = () => {
	$("#tab_list").html('')
	tabs.forEach((e, i) => {
		let id = e.id;
		let itemHtml = `<input type="radio" id="${id}" name="tabs" class="tab_input" readonly="readonly" ${e.selected ? 'checked' :''} onchange="onInputChange(this)"/>
						<label class="tab" for="${id}">
							<span class="tab_text">${e.name}</span>
						</label>`;
		$("#tab_list").append(itemHtml)
	})
}

onInputChange = (e) => {
	let id = e.id;
	if (id == 0) {
		$("#part_right").hide(300);
		$("#part_left").show(300);
		loadData();
	} else if (id == 1) {
		$("#part_left").hide(300);
		$("#part_right").show(300);
		loadDone();
	}
}
